<template>
    <div class="listItem" >
        <div class="itemLeft" v-if="isPlayIcon" @click="changeAudioId(songData)">
            <div class="songNum">{{ index + 1 }}</div>
            <div class="songName-singer">
                <div class="songName">{{ songData.al.name }}</div>
                <div class="songSinger">{{ songData.ar[0].name }}</div>
            </div>
        </div>
        <div class="itemRight">
            <div class="img2">
                <img class="auto-img" src="../../public/images/songList/排序.png" alt="">
            </div>
            <div class="img2 img3">
                <img class="auto-img" src="../../public/images/songList/列表.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
    name: "ListItem",
    props: {
        songData: {
            type: Object,
            default() {
                return {}
            }
        },
        index: {
            type: Number,
            default: 0
        },
        //控制播放图标的显示和隐藏
        isPlayIcon: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapState(['currentAudioInfo', '$audio', 'isPlay'])
    },
    created(){
         
    },
    methods: {

        ...mapMutations(['setAudioId']),

        //修改音频id
        changeAudioId() {
             
            

            //判断当前音频的id是否和点击播放的音频id一致
            if (this.currentAudioInfo.audioId === this.songData.id) {
                  

                if (this.isPlay) {
                    //暂停音频
                    this.$audio.pause();
                } else {
                    //播放音频
                    this.$audio.play();
                }

            } else {
                //设置新的音频id
                //vuex, 修改音频id
                this.setAudioId({
                    audioId: this.songData.id,
                    singerName: this.songData.ar[0].name,
                    songName: this.songData.al.name,
                    singerPic: this.songData.al.picUrl,
                    // singerId:this.songData.ar[0].id
                });
            }

        },
    }
}
</script>

<style lang="less" scoped>
.listItem {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.itemLeft {
    width: 85%;
    display: flex;
    align-items: center;
    height: 50px;
    align-items: center;

    .songNum {
        font-size: 14px;
    }

    .songName {
        font-weight: bold;
    }

    .songName-singer {
        margin-left: 15px;

        .songSinger {
            margin-top: 5px;
            color: #858A9F;
        }
    }
}

.itemRight {
    display: flex;

    .img {
        width: 30px;
    }

    .img2 {
        margin-right: 7px;
        width: 18px;
    }

    .img3 {
        margin-left: 10px;
    }
}
</style>